<template>
  <div style="border: 1px solid red">
    <h5>子组件 --- {{ value }}</h5>
    <h5>子组件里面aaa的值-- {{ aaa }}</h5>
    <h5>子组件里面bbb的值-- {{ bbb }}</h5>
    <button @click="updateTemp">子组件向更更改父组件的值</button>
    <button @click="aaaTemp">子组件想修改父组件aaa的值</button>
    <button @click="updateValue">子组件可以更改父组件的值（条件）</button>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    value: {
      type: Object,
      required: true
    },
    aaa: {
      type: Number,
      default: 0
    },
    bbb: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  methods: {
    updateTemp() {
      // 子组件一定不能修改父组件的值？ 它只能通知父组件，让父组件自己去改
      this.$emit('input', this.value + '-')
    },
    aaaTemp() {
      this.$emit('update:aaa', this.aaa + 1)
      this.$emit('update:bbb', this.bbb + 2)
    },
    updateValue() {
      // 如果props的值 是对象， 那么更改对象里面的属性，不叫子组件改父组件
      // 只有更改地址了 才叫子改父，才会报错  this.value = {}
      this.value.age = 10000 // 这个不会报错，原理就是对象 地址在栈里面，值的引用在堆里面， 我们这里改的是 值的引用，并没有更改地址
      //  this.value = {}  这个才叫修改，才会报错
    }
  }
}
</script>
